<template>
  <view class="m">
    <view class="fr">
      <view class="float blue" @click="open">筛选</view>
    </view>
    <view class="bgc">
    <scroll-view :style="{height: contentHeight + 'px'}" scroll-y="true"  @scrolltolower="queryData">
    <orderlist v-for="item in orderlists" :data="item" :sum="sum"/>
    <end-temp v-show="end"></end-temp>
  </scroll-view>
</view>
  <bottom-Box class="bottom flex ">
    <view style="width: 50%; text-align: center;">
      <view>收款合计</view>
      <view>{{ sum. receiptSum}}</view>
    </view>
    <view style="width: 50%; text-align: center;">
      <view>销售合计</view>
      <view>{{ sum. saleSum}}</view>
    </view>
  </bottom-Box>
  <uni-popup  ref="popup" type="bottom" >
    <ordersift @sure="sure" :customer="customer" :user='user' @masks="masks"/>

    </uni-popup>
    <!--遮罩-->
    <view  @touchmove.stop.prevent="" @tap="open" @open="open" >
      <view></view>
    </view>
  </view>
</template>

<script>
import { getScreen} from "../../service/auth";
import { orders,neworders } from "../../service/api/orderquery";
import endTemp from "../../components/endTemp";
import orderlist from "../components/orderlist";
import ordersift from "../components/ordersift";
import { getUserInfo } from '@/service/auth.js'
export default {
  name: "index",
  components:{endTemp,orderlist,ordersift},
  data(){
      return{
        customer:'',
        customerId:'',
        sum:null,
        mask:false,
        orderlists:[],
        contentHeight:0,
        end:false,
        page:1,
        size:20,
        user:null,
        order:''
      }
    },
  onLoad(option) {
    const app = getApp()
    this.customerId=option.customerId
    this.order=option.order
    if(option.customerId==app.globalData.customer.id){
      let customer={
        customerId:app.globalData.customer.id,
        customername:app.globalData.customer.name,
        // userId:app.globalData.customer.userId,
        // userName:app.globalData.customer.userName,
      }
      this.customer=customer
    }
    const data = getUserInfo()
    this.user = JSON.parse(data)
    this.onGet()
    },
  created() {
    const {width,height} = getScreen()
    this.contentHeight = height - (160 * width / 750)
  },
  methods:{
    masks(){
    this.$refs.popup.close()
    },
    queryData(){
      if(this.end)return
      this.page++
      this.onGet()
    },
    onGet(){
      const date={
        customerId:this.customerId,
        userId:this.user.userId,
      page:this.page,
      size:this.size
    }
    if (this.order) {
      neworders(date).then(res=>{
      if (res.data.content.length < this.size)
        this.end=true
        this.orderlists= this.orderlists.concat(res.data.content)
        this.sum=res.data.sum
    })
    } else {
      orders(date).then(res=>{
      if (res.data.content.length < this.size)
        this.end=true
        this.orderlists= this.orderlists.concat(res.data.content)
        this.sum=res.data.sum
    })
    }
      
    },
    open(){
      this.$refs.popup.open('buttom')
    },
    sure(e){
       if (this.order) {
          neworders(e).then(res=>{
          this.orderlists=res.data.content
            this.sum=res.data.sum
          })
          this.$refs.popup.close()
          } else {
          orders(e).then(res=>{
            this.orderlists=res.data.content
              this.sum=res.data.sum
            })
            this.$refs.popup.close()
          }
        }
  },
  
}
</script>

<style lang="scss">
page{
  background-color: #f6f7f7;

.m{
  .float{
    float: right;
    margin: 10rpx;
  }
  .blue{
    color: rgb(123,207,254);
  }
  .fr::after{
    display: block;
            content: '';
            clear: both;
  }
  .bgc{
    background-color: white;
  }
  .bottom{
  background-color: #f6f7f7;;
  position: fixed;
  bottom: 0;
  // height: 160rpx;
  width: 100%;
  box-sizing: border-box;
  }
}
}
</style>
